extends ../_layout

block active
  - sidebar_active = 'notifications.html'

block content
  h3
    // Breadcrumb right aligned
    ol.breadcrumb.pull-right
      li
        a(href='#') Home
      li
        a(href='#') Elements
      li.active Notifications
    | Notifications
    // Small text for title
    span.text-sm.hidden-xs A complete set of notification posibilities
    // Breadcrumb below title
    ol.breadcrumb
      li
        a(href='#') Home
      li
        a(href='#') Elements
      li.active Notifications

  // Breadcrumb next to view title
  ol.breadcrumb
    li
      a(href='#') Home
    li
      a(href='#') Elements
    li.active Notifications

  ol.breadcrumb
    li
      a(href='#') Home
    li
      a(href='#') Elements
    li.active Notifications

  // START row
  .row
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Notify Alerts
        .panel-body
          p Create toggleable notifications that fade out automatically.
          p
            button.btn.btn-default(type="button", data-notify="", data-message="Message ..") Message
          p You can use HTML inside your notification message          
          p
            button.btn.btn-default(type="button", data-notify="", data-message="<em class='fa fa-check'></em> Message with icon..") Message with Icon
      // END panel

      // START panel
      .panel.panel-default
        .panel-heading
          | Alert Styles
        .panel-body
          .alert.alert-success(role='alert')
            strong Well done!
            |  You successfully read this important alert message.
          .alert.alert-info(role='alert')
            strong Heads up!
            |  This alert needs your attention, but it&apos;s not super important.
          .alert.alert-warning(role='alert')
            strong Warning!
            |  Better check yourself, you&apos;re not looking too good.
          .alert.alert-danger(role='alert')
            strong Oh snap!
            |  Change a few things up and try submitting again.
          .alert.alert-warning.alert-dismissible.fade.in(role='alert')
              button.close(type='button', data-dismiss='alert', aria-label='Close')
                span(aria-hidden='true') &times;
              strong Holy guacamole!
              |  Best check yo self, you&apos;re not looking too good.

      // END panel
    .col-lg-6
      // START panel
      .panel.panel-default
        .panel-heading
          | Notify with Status
        .panel-body
          p Uses builtin alert status to apply notifications
          p
            button.btn.btn-danger(type="button", data-notify="", data-message="Message with status.." data-options='{"status":"danger"}') Danger
            button.btn.btn-info(type="button", data-notify="", data-message="Message with status.." data-options='{"status":"info"}') Info
            button.btn.btn-warning(type="button", data-notify="", data-message="Message with status.." data-options='{"status":"warning"}') Warning
            button.btn.btn-success(type="button", data-notify="", data-message="Message with status.." data-options='{"status":"success"}') Success
          p Show in different positions
          p
            button.btn.btn-default(type="button", data-notify="", data-message="Message in position.." data-options='{"pos":"bottom-center"}') Bottom Cener
            button.btn.btn-default(type="button", data-notify="", data-message="Message in position.." data-options='{"pos":"top-left"}') Top Left
            button.btn.btn-default(type="button", data-notify="", data-message="Message in position.." data-options='{"pos":"top-right"}') Top Right
            button.btn.btn-default(type="button", data-notify="", data-message="Message in position.." data-options='{"status":"success", "pos":"bottom-right"}') Succes at Bottom Right
      // END panel

      // START panel
      .panel.panel-default
        .panel-heading
          | Modals
        .panel-body

          // Button trigger modal
          button.btn.btn-primary.btn-lg(type='button', data-toggle='modal', data-target='#myModal')   Default modal
          button.btn.btn-primary.btn-lg(type='button', data-toggle='modal', data-target='#myModalLarge')   Large modal
          button.btn.btn-primary.btn-lg(type='button', data-toggle='modal', data-target='#myModalSmall')  Small modal
      // END panel

      // START panel
      .panel.panel-default
        .panel-heading
          | Popovers
        .panel-body
          button.btn.btn-default(type='button', title="Popover title", data-container='body', data-toggle='popover', data-placement='left', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.')   Popover on left
          button.btn.btn-default(type='button', title="Popover title", data-container='body', data-toggle='popover', data-placement='top', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.')   Popover on top
          button.btn.btn-default(type='button', title="Popover title", data-container='body', data-toggle='popover', data-placement='bottom', data-content='Vivamussagittis lacus vel augue laoreet rutrum faucibus.')   Popover on bottom
          button.btn.btn-default(type='button', title="Popover title", data-container='body', data-toggle='popover', data-placement='right', data-content='Vivamus sagittis lacus vel augue laoreet rutrum faucibus.')   Popover on right
      // END panel
      // START panel
      .panel.panel-default
        .panel-heading Tooltips
        .panel-body
          button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='left', title='Tooltip on left') Tooltip on left
          button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='top', title='Tooltip on top') Tooltip on top
          button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='bottom', title='Tooltip on bottom') Tooltip on bottom
          button.btn.btn-default(type='button', data-toggle='tooltip', data-placement='right', title='Tooltip on right') Tooltip on right
      // END panel
  // END row

  // START panel
  .panel.panel-default
    .panel-heading Progress Bar
      .btn-group.pull-right
    .panel-body
      .progress
        .progress-bar.progress-bar-success(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%')
          span.sr-only 40% Complete (success)
      .progress
        .progress-bar.progress-bar-info(role='progressbar', aria-valuenow='20', aria-valuemin='0', aria-valuemax='100', style='width: 20%')
          span.sr-only 20% Complete
      .progress.progress-sm
        .progress-bar.progress-bar-warning(role='progressbar', aria-valuenow='60', aria-valuemin='0', aria-valuemax='100', style='width: 60%')
          span.sr-only 60% Complete (warning)
      .progress.progress-xs
        .progress-bar.progress-bar-danger(role='progressbar', aria-valuenow='80', aria-valuemin='0', aria-valuemax='100', style='width: 80%')
          span.sr-only 80% Complete (danger)
      .progress
          .progress-bar.progress-bar-purple.progress-bar-striped(role='progressbar', aria-valuenow='40', aria-valuemin='0', aria-valuemax='100', style='width: 40%')
            span.sr-only 40% Complete (success)
      .progress
        .progress-bar.progress-bar-yellow(style='width: 35%')
          span.sr-only 35% Complete (success)
        .progress-bar.progress-bar-warning.progress-bar-striped(style='width: 20%')
          span.sr-only 20% Complete (warning)
        .progress-bar.progress-bar-danger(style='width: 10%')
          span.sr-only 10% Complete (danger)
  // END panel

block vendor_js

  // Modals must be declare at body level so the content overlaps the background
  
  // Modal
  #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
    .modal-dialog
      .modal-content
        .modal-header
          button.close(type='button', data-dismiss='modal', aria-label='Close')
            span(aria-hidden='true') &times;
          h4#myModalLabel.modal-title Modal title
        .modal-body ...
        .modal-footer
          button.btn.btn-default(type='button', data-dismiss='modal') Close
          button.btn.btn-primary(type='button') Save changes
  // Modal Large
  #myModalLarge.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabelLarge', aria-hidden='true')
    .modal-dialog.modal-lg
      .modal-content
        .modal-header
          button.close(type='button', data-dismiss='modal', aria-label='Close')
            span(aria-hidden='true') &times;
          h4#myModalLabelLarge.modal-title Modal title
        .modal-body ...
        .modal-footer
          button.btn.btn-default(type='button', data-dismiss='modal') Close
          button.btn.btn-primary(type='button') Save changes
  // Modal Small
  #myModalSmall.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabelSmall', aria-hidden='true')
    .modal-dialog.modal-sm
      .modal-content
        .modal-header
          button.close(type='button', data-dismiss='modal', aria-label='Close')
            span(aria-hidden='true') &times;
          h4#myModalLabelSmall.modal-title Modal title
        .modal-body ...
        .modal-footer
          button.btn.btn-default(type='button', data-dismiss='modal') Close
          button.btn.btn-primary(type='button') Save changes